<template>
  <div>
     <span @click="toggleClick">
       <span ref="text">{{text}}</span>
       <i :class="`cm-icons-arrow-`+direction"></i>
      </span>
  </div>

</template>

<script>
  export default {
    name: "more",
    data(){
      return {
        isShow:false,
        text:'展开更多',
        direction:'down',
      }
    },
    methods:{
      toggleClick(){
        this.isShow = !this.isShow
        this.$emit('toggleClick')
      }
    },
    watch:{
      isShow(val){
        if(val){
          this.text = '收起';
          this.direction = 'up';
          this.$refs.text.style.color = '#1068E9'
        } else {
          this.text = '展开更多';
          this.direction = 'down';
          this.$refs.text.style.color = '#bbb'
        }
      }
    },
  }
</script>

<style scoped>


</style>
